<template>
    <div>
        <x-header style="margin:0;">代人报名</x-header>
        <div class="search" >
            <input class="search_box"  placeholder="搜索" v-model="search_msg"/>
            <input class="search_btn" type="submit" value="搜索" @click="search">
        </div>
   
        <div id="show_all_teacheres">
            <ul>
                <li  v-for="item in students" class="all_teacheres">
                    <img style="width:41px;height:41px;border-radius:20.5px;" :src="item.avatar" alt="">
                    <span class="t_name">{{item.user_name}}</span>
                    <span class="t_dept">{{item.dept_name}}</span>
                    <span class="t_name2">{{item.filed}}</span>
                    <span class="t_dept2">{{item.workstatus}}</span>
                     <span class="checkbox">
                        <input class="check_input" type="checkbox" v-model="item.issignup" />
                    </span>
                </li>
            </ul>
        </div>
        <div class="btm">
            <x-button  type="default"  class="start_change" @click.native="submit">完成</x-button>
        </div>
    </div>
</template>

<script>
import { XHeader,Flexbox,XInput, FlexboxItem,XButton} from 'vux'
import { mapActions } from "vuex";

export default {
    data() {
        return {
            search_msg:'',
            subclassid:this.$route.query.subclassid,
            classinfo:this.$store.state.user.classpreview[this.$route.params.index]
        }
    },
    created(){
        this.init()
        console.log(this.students)
    },
    computed:{
        students(){
            return this.$store.state.user.classstudent
        }
    },
    components:{
        XHeader,
        Flexbox, 
        FlexboxItem,
        XInput,
        XButton
    },
    methods:{
        ...mapActions({
            getClassPreviewStudent:'getClassPreviewStudent',
            signupClass:'signupClass'
        }),
        submit(){
            var subclassids =[]
            for (let subindex = 0; subindex < this.classinfo.subclass.length; subindex++) {
                subclassids.push(this.classinfo.subclass[subindex].subclass_id)    
            }
            var stus = []
            for (let index = 0; index < this.students.length; index++) {
                const element = this.students[index]
                if (element.issignup === true) {
                    var stu = {"user_id":element.user_id,"user_name":element.user_name}
                    stus.push(stu)
                }                
            }
            if (stus.length === 0) {
                return
            }
            var user = this.$store.state.user.userinfo
            var param = {
                'class_id':this.classinfo.class.class_id,
                "class_name":this.classinfo.class.subject,
                "subclass_id":subclassids,
                "applicant_id":user.id,
                "applicant_name":user.name,
                "students":stus}
            console.log("request param",JSON.stringify(param))
            this.signupClass({ vue: this, param: param }).then(rs => {
                console.log("success")
                 this.$vux.toast.text('报名成功', 'default')
                 setTimeout(function(){ 
                      this.$router.go(-1)
                 }.bind(this),1000)
               
            }).catch(error => {
                var errinfo = this.errinfo
                if(errinfo.code===400){
                     this.$vux.toast.text(errinfo.msg, 'default')
                }else if(errinfo.response&&(errinfo.response===undefined)){
                    this.$vux.toast.text('请求超时', 'default')
                }else{
                     this.$vux.toast.text(this.httpmsg+this.errinfo.response.data.error, 'default')
                }
                console.log(error)
            }) 
        },
        init(){
            //debugger
            var classid = this.classinfo.class.class_id
            var param = {
                "searchtext":"",
                "classid":classid}
            this.getClassPreviewStudent({vue:this,param:param}).then(rs=>{

            }).catch(error => {
                console.log(error)
            })
        },
        search(){
            console.log(this.search_msg)
            var classid = this.classinfo.class.class_id
            var param = {
                "searchtext":this.search_msg,
                "classid":classid}
            this.getClassPreviewStudent({vue:this,param:param}).then(rs=>{

            }).catch(error => {
                console.log(error)
            })
        }

    }
}
</script>

<style scoped>
    input::-webkit-input-placeholder { /* WebKit browsers */ 
    color: #BDBDBD ;
    font-size: 12px;
    } 

    input:-moz-placeholder { /* Mozilla Firefox 4 to 18 */ 
    color: #BDBDBD ; 
    font-size: 12px;
    } 

    input::-moz-placeholder { /* Mozilla Firefox 19+ */ 
    color: #BDBDBD ; 
    font-size: 12px;
    } 

    input:-ms-input-placeholder { /* Internet Explorer 10+ */ 
    color: #BDBDBD ; 
    font-size: 12px;
    } 
   .search{
       height:50px;
       margin:0;
       padding-top:7.5px;
   }
   .search_box{
       width:80%;
       height:32.5px;
       margin:0 0 10px 15px;
       padding:0;
       box-shadow:0 0  20px #EEEEEE;
       border-radius:5px;
       border: 0;
       background: url(../asset/images/magnifier.png) 10px 9px no-repeat;
       background-size: 14px 14px;
       padding-left:30px;
       outline: none;
   }
   .search_btn{
        width: 10%;
        height: 26.5px;
        background: 0;
        border: 0;
        color: #F25257;
        margin: 0px 10px 0px 0px;
        float: right;
        outline: none;
        margin-top: 5px;
        font-size: 14px;
        font-family: PingFangSC-Regular;;
   }
   .all_teacheres {
       position: relative;
       height:66px;
       margin-left: 17.5px;
   }
    .all_teacheres  img{
       position: absolute;
       top:10px;
   }
   .all_teacheres:last-child{
       margin-bottom: 50px;
   }
   .t_name{
       position: absolute;
       left:20%;
       top:12px;
       font-size:14px; 
       font-family: PingFangSC-Regular
   }
   .t_dept{
        position: absolute;
        left:45%;
        top:12.5px;
        color:#A5A5A5 ;
        font-size:12px; 
        font-family: PingFangSC-Regular
   }
     .t_name2{
        position: absolute;
        left:20%;
        top:36px;
        color:#A5A5A5 ;
        font-size:12px; 
        font-family: PingFangSC-Regular
   }
   .t_dept2{
       position: absolute;
       left:45%;
       top:36px;
       color:#A5A5A5 ;
       font-size:12px; 
       font-family: PingFangSC-Regular
   }
   .checkbox{
        position:absolute;
        left:89%;
        top:23px;
        width:16.5px;
        height:16.5px;
   }
   .checkbox input[type="checkbox"]{
        -webkit-appearance: none;
        -webkit-appearance:checked;
        background: url(../asset/images/unchecked.png) no-repeat;
        background-size: 16.5px 16.5px;
        border:none
   }
   .checkbox input[type="checkbox"]:checked{
        -webkit-appearance: none;
        -webkit-appearance:checked;
        background: url(../asset/images/checked.png) no-repeat;
        background-size: 16.5px 16.5px;
        border:none
   }
    .check_input{
        width:16.5px;
        height:16.5px;
   }
   .btm{
        width:100%;
        height:50px;
        background: rgba(0,0,0,0.10);
        text-align:center;
        line-height:50px;
        position: fixed;
        bottom: 0;
   }
   .start_change{
       display: inline-block;
        width:90%;
        height:35px;
        line-height: 35px;
        margin-top:7.5px;
        font-size: 14px;
        border:0.5px solid #F25257;
        color:#FFFFFF;
        background:#F25257;
        border-radius: 8px;
   }
</style>
